<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>check form</title>
		<style>
			input{
				width: 200px;
				height: 40px;
				margin: 3px;
			}
			.info{
				color: lightblue;
				
			}
		</style>
	</head>
	<body>
		<form action="" id="form1">
			卡号：<input id="cardNum" type="text" placeholder="请输入以10开头的16位数字" maxlength="16" autofocus><br />
			<span class="cardInfo info"></span><br />
			密码：<input id="pwd" type="text" maxlength="12"><br />
			<span class="pwdInfo info"></span><br />
			<button type="submit">提交</button>
			<button type="reset">重置</button><br />
			<span class="formInfo info"></span><br />
		</form>
			
			<script>
				cardNum.addEventListener('focus',function(){
					this.style.backgroundColor="azure";
				});
				cardNum.addEventListener('blur',checkCard);
				form1.addEventListener('submit',checkForm);
				function checkForm(e){
					e.preventDefault();
					const cardValid = checkCard.call(cardNum);
					const pwdValid = checkPwd.call(pwd);
					var formInfo = document.querySelector('.formInfo');
					if(cardValid && pwdValid){
						formInfo.textContent="数据输入正确。表单可以提交！"
						formInfo.style.color = "lightblue";
						this.submit();
					}else{
						formInfo.textContent="数据输入错误。请重新输入！"
						formInfo.style.color = "red";
					}
				}
				function checkCard(){
					const cardPattern = /^10\d{14}$/;
					var cardInfo =document.querySelector('.cardInfo');
					if(cardPattern.test(this.value)){
						document.querySelector('.cardInfo').textContent = "卡号输入正确";
						cardInfo.style.color = "lightblue";
						return true;
					}else{
						
						cardInfo.textContent = "卡号输入错误，请重新输入";
						cardInfo.style.color = "red";
						this.focus();
						return false;
					}

				}
			
				pwd.addEventListener('blur',checkPwd);
				function checkPwd(){
					var pwdInfo =document.querySelector('.pwdInfo');
					const pwdPattern = /^(?=.*[A-Z])(?=.*[a-z])[a-zA-Z0-9_]{8,12}$/;
					if(pwdPattern.test(pwd.value)){
						pwdInfo.textContent = "密码输入正确";
						pwdInfo.style.color = "lightblue";
						return true;
					}else{
						pwdInfo.textContent = "密码输入错误";
						pwdInfo.style.color = "red";
						this.focus();
						return false;
					}
					
				}
				
			</script>
	</body>
</html>